<template>
	<div class="build_container">
		<!-- {{ build }} -->
		<div class="build_title">
			<h1>{{ build.name }}</h1>
		</div>
		<el-divider class="divider"></el-divider>
		<div class="build_main">
			<div v-for="cost of build.costs" :key="cost.id" @click="gotoItem(cost.id)">
				<div class="flex-center">
					<my-image type="items" :icon="cost.iconUrl" :size="64" />
					<p class="cost_text">&nbsp;x {{ cost.amount}}</p>
				</div>
			</div>
			<p class="recipe_text">=></p>
			<div class="build">
				<div class="flex-center" @click="gotoBuild(build.id)">
					<my-image type="buildings" :icon="build.iconUrl" :size="64" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	export default {
		name: "simpleRecipeInfo",
		props: ["build"],
		components: {
			MyImage,
		},
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			},
			Build(url) {
				return this.$img.b_64(url);
			},
			
			gotoItem(id) {
				if (this.$route.name == "BuildInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/item/info?id=" + id
					});
				}
			},
			gotoBuild(id) {
				if (this.$route.name == "ItemInfo" || this.$route.query.id != id) {
					this.$router.push({
						path: "/build/info?id=" + id
					});
				}
			}
		},
	};
</script>

<style lang="less" scoped>
	.build_container {
		width: calc(100% - 20px);
		border: 1px solid;
		margin: 5px;
		padding: 5px;
		border-radius: 5px;

		.build_title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			h1 {
				margin: 0px;
				margin-top: 10px;
			}

			.time {}
		}

		.flex-center {
			display: flex;
			justify-content: space-around;
			justify-items: center;
			align-items: center;
		}

		.build_main {
			width: 100%;
			display: flex;
			justify-content: space-between;
			justify-items: center;
			align-items: center;

			// height: 32px;
			.cost_text {
				float: left;
				margin: 0px;
				font-size: 32px;
			}

			.bottom_text {
				font-size: 20px;
				text-align: center;
			}
		}
	}
</style>